import { Table, Space, Row, Col, Button , Modal,Form, Input, Checkbox } from "antd"
import React,{useState,useEffect} from 'react'
import moment from 'moment';
import './style.scss'

import { useAppDispatch,useAppSelector } from "@/hooks"


import {fetchadduser} from '@/api'
import{ getuserlist} from '@/store/actions'


const layout = {
  wrapperCol : { offset: 4, span: 16 }
}

export default ()=>{
  let dispatch = useAppDispatch()
  let userlist = useAppSelector(store=>store.user.userlist)
  const [isModalVisible, setIsModalVisible] = useState(false);
  const columns = [
    {
      title: '注册时间',
      key: 'create_time',
      render:(text,row) =>{
        return  moment(row.create_time).format("YYYY-MM-DD HH:mm:ss")
      }

      

    
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, row) => (
        <Space size="middle">
          <a onClick={()=>{console.log(row._id);
          }}>禁用</a>
          <a>启用</a>
        </Space>
      )
    }
  ]
  

 
  useEffect(()=>{
    dispatch(getuserlist({}))
  },[isModalVisible])
  // model控制器
    const showModal = () => {
    setIsModalVisible(true);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //点击提交
  const onFinish = (values: any) => {
  //提交添加接口
  fetchadduser(values) 
  //提交后关闭model窗口
  setIsModalVisible(false);
  }
  return (
    <div className='qf-userlist'>
      <div className='qf-filter'>
        <Row>
          <Col span={12}>
            <Button 
            size='small' 
            type="primary"
             onClick = {()=>{showModal()}}
            >添加用户</Button>
          </Col>
        </Row>
        <div className = 'qf-model'>
              <Modal title="添加用户" 
              footer={null}
              visible={isModalVisible} 
              onCancel ={()=>{handleCancel()}}
              >
                <div>
                    <Form
                    name="basic"
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 18 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    >
                      <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '用户名是必填!' }]}
                      >
                        <Input />
                      </Form.Item>

                      <Form.Item
                        label="权限"
                        name="role"
                        rules={[{ required: true, message: '请设置权限!' }]}
                      >
                        <Input />
                      </Form.Item>

                      <Form.Item {...layout}>
                        <Button type="primary" htmlType="submit">
                          提交
                        </Button>
                      </Form.Item>

                    </Form>

                </div>
            </Modal>
        </div>

      </div>
      <div className='qf-table'>
        {
          userlist?
            <Table
            rowKey={'_id'}
            columns={columns}
            dataSource={userlist}
            pagination={{
              total:userlist.length,
              defaultPageSize:2,
              pageSizeOptions:[2,5,10],
              showSizeChanger:true,
              showTotal:t=>(<div>总共有{t}条数据</div>),
            }}
            scroll={{
              scrollToFirstRowOnChange:true,
              y:300
            }}
    
          />
          :null

        }
      </div>
      <div></div>
    </div>
  )
}
